<template>
    <div>
        <p>{{ msg }}</p>
        <p>{{ name }}</p>
        <p>{{ age }}</p>
        <p>{{ reverseMsg }}</p>

        <button @click="setMsg('hello world')">同步的方式，修改msg</button>
        <button @click="setMsgAsync(8471)">异步的方式，修改msg</button>
        <hr>

        <p>{{ user.username }}</p>
        <button @click="setUsernameAsync(8471)">修改user.username</button>
    </div>
</template>

<script>
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
// console.log(mapState(['msg','name']))
console.log(mapMutations(['setMsg']))

export default {
    computed:{
        age(){
            return 29
        },
        ...mapState(['msg','name','user']),
        ...mapGetters(['reverseMsg'])
    },
    methods: {
        ...mapMutations(['setMsg']),
        ...mapActions(['setMsgAsync','setUsernameAsync'])
    },
}
</script>

<style lang="less" scoped>
    
</style>